<template>
  <div class="infoTable-containner">
    <div class="tableSearch">
      <el-form :inline="true"  class="demo-form-inline clearfix shortInput"  size="mini" >
        <el-form-item class="labelTitle shortInput" label="设备名称:">
          <el-input></el-input>
        </el-form-item>
        <el-form-item class="labelTitle shortInput" label="机构:" style="padding-left: 15px">
          <el-select v-model="value5">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="labelTitle shortInput" label="测点名称:" style="padding-left: 15px">
          <el-select v-model="value5">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="labelTitle" label="提交时间:" style="margin-right: 0px; padding-left: 15px">
          <el-date-picker
            v-model="sxyInfo.startdate"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptionsStart"
            placeholder="开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="endTime" label="~" style="margin-right: 5px">
          <el-date-picker
            v-model="sxyInfo.enddate"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptionsEnd"
            placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="titleBtn" style="margin-right: 6px">
          <el-button type="primary">查询</el-button>
          <el-button type="info">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div  class="tableList">
      <el-table
        :data="tableData"
        border
        stripe border fit highlight-current-row
        style="width: 100%;height: 521px; max-height:521px; overflow-y: auto "
        :height='521'
        :header-cell-style="{background:'#D8DEE8'}"
      >
        <el-table-column
          type="index"
          align="center"
          label="序号"
          width="60px"
        >
        </el-table-column>
        <el-table-column
          v-for="(column, index) in cols"
          :prop="column.prop"
          :label="column.label"
          :key="index"
          :width="column.width"
          :sortable="column.sortable"
        >
        </el-table-column>
      </el-table>
      <div class="pagination-container footerPage">
        <el-pagination
          @current-change="CurrentChange"
          @size-change="SizeChange"
          :page-sizes="[5, 10, 20, 50]"
          background layout="total, sizes, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        // 验证时间逻辑
        pickerOptionsStart: {
          disabledDate: time => {
            const endDateVal = this.sxyInfo.enddate
            if (endDateVal) {
              return time.getTime() > new Date(endDateVal).getTime()
            }
          }
        },
        pickerOptionsEnd: {
          disabledDate: time => {
            const beginDateVal = this.sxyInfo.startdate
            if (beginDateVal) {
              return (
                time.getTime() <
                new Date(beginDateVal).getTime() - 1 * 24 * 60 * 60 * 1000
              )
            }
          }
        },
        // 下拉
        options: [],
        // 下拉框
        value5: '',
        // 时间
        sxyInfo: {},
        cols: [
          { prop: 'alarm_source', label: '站点名称' },
          { prop: 'equip_name', label: '设备名称' },
          { prop: 'fittings_type_label', label: '机构类型' },
          { prop: 'oid_name', label: '测点名称', width: '200px' },
          { prop: 'num', label: '发生次数', width: '100px' },
          { prop: 'content', label: '预警内容', width: '560px' },
          { prop: 'creator_time', label: '发生时间', width: '220px' }
        ],
        tableData: [],
        indexMethod: '',
        total: 0,
        // 换页
        siteListQuery: {
          page: 1,
          limit: 20,
          importance: undefined,
          title: undefined,
          type: undefined,
          sort: '+id'
        },
        // 总览接口
        submitdata: {
          access_token: '',
          type: 'earlywarning_get_condition',
          data: {
            condition: {
              equip_cid: '',
              equip_name: '',
              fittings_type: '',
              oid: '',
              oid_name: '',
              begin_time: '',
              end_name: ''
            },
            page: {
              page_size: '10',
              page_number: '1'
            }
          }
        }
      }
    },
    mounted() {
      this.queryData()
    },
    methods: {
      // 换页
      handleSizeChange(val) {
        this.siteListQuery.limit = val
        this.gettableData()
      },
      handleCurrentChange(val) {
        this.siteListQuery.page = val
        this.tableData()
      },
      // 总览获取
      queryData() {
        axios.post('/earlywarning', this.submitdata, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.tableData = res.data.data.items
          this.total = parseInt(res.data.data.page.total)
          // console.log(this.tableData)
          console.log(res)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 当前页
      CurrentChange(val) {
        this.submitdata.data.page.page_number = (val) + ''
        this.queryData()
      },
      // 每页显示多少条
      SizeChange(pageSize) {
        this.submitdata.data.page.page_size = (pageSize) + ''
        this.queryData()
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /***************清除浮动******************/
  .clearfix:after{
    content: '';
    display: block;
    clear: both;
  }
  .infoTable-containner{
    width: 100%;
    min-height: 500px;
    .tableSearch{
      width: 100%;
      height: 50px;
      background-color: #F0F3F5;
      font-size:14px;
      font-family:MicrosoftYaHei;
      font-weight:400;
      color:rgba(105,114,126,1);
      line-height: 20px;
      padding: 15px 20px  0px 20px;
      .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 100%;
        /*padding-top: 10px;*/
      }


    }
    .tableList{
      width: 100%;
      min-height:20vw;
    }
    .footerPage{
      float: right;
      right:20px;
      position: relative;
    }


  }
  /deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #FAFAFA;
  }
  /deep/ .el-form--inline .el-form-item__content {
    display: inline-block;
    vertical-align: middle;
  }
  /deep/ .el-form--inline .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
  }
  /deep/ .el-table--border th, .el-table__fixed-right-patch{
    padding: 3px 0;
  }
  /deep/ .labelTitle > label.el-form-item__label {
    color: #323842;
    font-weight: normal;
  }
  /deep/ .checkBoxCheck > .el-checkbox{
    top: 2px;
  }
  /deep/ .checkBoxCheck > .el-checkbox + .el-checkbox{
    margin-left: 15px;
  }
  /deep/ .titleBtn > .el-form-item__content > .el-button + .el-button{
    margin-left: 6px;
  }
  /deep/ .shortInput > .el-form-item__content > .el-input > .el-input__inner{
    width: 160px;
  }
</style>
